<template>
    <div class="home-banner swiper-container">
       <div class="swiper-wrapper">
           <router-link 
                class="swiper-slide"
                v-for="banner in banners"
                :key="banner.id"    
                tag="div"
                :to="{name:'moviedetail',params:{id:banner.id}}"
           >
               <img width="100%" :src="getImages(banner.images.small)" alt="">
           </router-link>
       </div>
       <div class="swiper-pagination"></div>
    </div>
</template>

<script>
//https://blog.csdn.net/jsyxiaoba/article/details/79628983
import Swiper from "swiper"
import getImages from "@/modules/util-getImages"
export default {
    data(){
        return {
            banners:[]
        }
    },
    methods:{
       getImages
        // getImages( _url ){
        //     if( _url !== undefined ){
        //         let _u = _url.substring( 7 );
        //         return 'https://images.weserv.nl/?url=' + _u;
        //     }
        // }
    },
    created(){  
        this.$http.get("/api/db/in_theaters?limit=6",{
            params:{
                limit:6
            }
        }).then(res=>{
            this.banners = res.data.object_list;
            //数据后续更改  虚拟dom进行对比  diff算法  重新进行真实dom的渲染
            //必须要等到因数据改变引发真实dom渲染完毕后，再去进行实例化操作即可
            //this.$nextTick(()=>{})
            this.$nextTick(()=>{
                new Swiper(".home-banner",{
                    loop:true,
                    pagination:{
                        el:".swiper-pagination"
                    }
                })
            })
           
        })
    }
}
</script>
<!--scoped作用： 让内部样式只能作用在组件内部-->
<style lang="scss">
    .home-banner{
        height:2.2rem;
        img{
            width:100%;
            height:100%;
        }
    }
    
    .mint-header{
        background-color: #7a94a7;
    }
    
    
</style>
